<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/sub.css" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav ahref">
			<a class="mui-icon mui-pull-left icon-login" href="login.html" id="login"></a>
			<div class="input-wrap">
				<input type="text" name="" id="search-btn" value="" placeholder="" />
				<a href="" class="mui-icon icon-search mui-pull-right"></a>
			</div>
			<a class="mui-icon mui-pull-right icon-sao"></a>
		</header>
		<div class="mui-content">
			<!--轮播图-->
			<div id="slider" class="mui-slider">
				<div class="mui-slider-group mui-slider-loop" id="sliderwrap">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="http://placehold.it/400x300">
						</a>
					</div>
					<!-- 第一张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="http://placehold.it/400x300">
						</a>
					</div>
					<!-- 第二张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="http://placehold.it/400x300">
						</a>
					</div>
					<!-- 第三张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="http://placehold.it/400x300">
						</a>
					</div>
					<!-- 第四张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="http://placehold.it/400x300">
						</a>
					</div>
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="http://placehold.it/400x300">
						</a>
					</div>
				</div>
			</div>
			<!--轮播图-->
			<!--S列表列表-->
			<h1 class="tit-line">热门日志</h1>
			<ul class="mui-table-view mui-grid-view journal-hot" id="rzhtwrap">
				<li class="mui-table-view-cell mui-media mui-col-xs-12">
					<a href="#">
						<div class="header-img">
							<img class="mui-media-object" src="http://placehold.it/300x100">
						</div>
						<div class="mui-media-body">
							<h1 class="journal-tit">标题标题</h1>
							<div class="mui-clearfix journal-info">
								<img src="http://placehold.it/16x16" class="mui-pull-left" />
								<p class="mui-pull-left">作者名字</p>
								<p class="mui-pull-right">2017-09-09</p>
							</div>
							<p class="journal-content">内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容
							</p>
							<p class="journal-footer">执行：2 收藏：13</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-12">
					<a href="#">
						<div class="header-img">
							<img class="mui-media-object" src="http://placehold.it/300x100">
						</div>
						<div class="mui-media-body">
							<h1 class="journal-tit">标题标题</h1>
							<div class="mui-clearfix journal-info">
								<img src="http://placehold.it/16x16" class="mui-pull-left" />
								<p class="mui-pull-left">作者名字</p>
								<p class="mui-pull-right">2017-09-09</p>
							</div>
							<p class="journal-content">内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容
							</p>
							<p class="journal-footer">执行：2 收藏：13</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-12">
					<a href="#">
						<div class="header-img">
							<img class="mui-media-object" src="http://placehold.it/300x100">
						</div>
						<div class="mui-media-body">
							<h1 class="journal-tit">标题标题</h1>
							<div class="mui-clearfix journal-info">
								<img src="http://placehold.it/16x16" class="mui-pull-left" />
								<p class="mui-pull-left">作者名字</p>
								<p class="mui-pull-right">2017-09-09</p>
							</div>
							<p class="journal-content">内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容
							</p>
							<p class="journal-footer">执行：2 收藏：13</p>
						</div>
					</a>
				</li>
			</ul>
			<h1 class="tit-line">新娘日志</h1>
			<ul class="mui-table-view mui-grid-view journal-normal" id="xlrzwrap">
				<li class="mui-table-view-cell mui-media mui-col-xs-12">
					<a href="#">
						<div class="header-img">
							<img class="mui-media-object" src="http://placehold.it/300x100">
						</div>
						<div class="mui-media-body">
							<h1 class="journal-tit">标题标题</h1>
							<div class="mui-clearfix journal-info">
								<img src="http://placehold.it/16x16" class="mui-pull-left" />
								<p class="mui-pull-left">作者名字</p>
								<p class="mui-pull-right">2017-09-09</p>
							</div>
							<p class="journal-content">内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容
							</p>
							<p class="journal-footer">执行：2 收藏：13</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-12">
					<a href="#">
						<div class="header-img">
							<img class="mui-media-object" src="http://placehold.it/300x100">
						</div>
						<div class="mui-media-body">
							<h1 class="journal-tit">标题标题</h1>
							<div class="mui-clearfix journal-info">
								<img src="http://placehold.it/16x16" class="mui-pull-left" />
								<p class="mui-pull-left">作者名字</p>
								<p class="mui-pull-right">2017-09-09</p>
							</div>
							<p class="journal-content">内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容
							</p>
							<p class="journal-footer">执行：2 收藏：13</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-12">
					<a href="#">
						<div class="header-img">
							<img class="mui-media-object" src="http://placehold.it/300x100">
						</div>
						<div class="mui-media-body">
							<h1 class="journal-tit">标题标题</h1>
							<div class="mui-clearfix journal-info">
								<img src="http://placehold.it/16x16" class="mui-pull-left" />
								<p class="mui-pull-left">作者名字</p>
								<p class="mui-pull-right">2017-09-09</p>
							</div>
							<p class="journal-content">内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容
							</p>
							<p class="journal-footer">执行：2 收藏：13</p>
						</div>
					</a>
				</li>
			</ul>
			<!--E列表列表-->
		</div>
		
		<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item" href="index.html" data-id="index">
			<span class="mui-icon qcjh"></span>
			<span class="mui-tab-label">轻松结婚</span>
		</a>
		<a class="mui-tab-item" href="steward.html" data-id="steward">
			<span class="mui-icon hlgj"></span>
			<span class="mui-tab-label">婚礼管家</s pan>
		</a>
		<a class="mui-tab-item mui-active" href="journal.html" data-id="journal">
			<span class="mui-icon xlrz"></span>
			<span class="mui-tab-label">新娘日志</span>
		</a>
		<a class="mui-tab-item" href="myshemher.html" data-id="myshemher">
			<span class="mui-icon wdxh"></span>
			<span class="mui-tab-label">我的相合</span>
		</a>
		</nav>
		<script src="js/artTemplate.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mod.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//mui("body").on('tap','a',function(){document.location.href=this.href;});
			
			 /*渲染热门日志*/
			mui.ajax('http://xhwed.com/xhwe.php/Journal/journalHot',{
				dataType:'json',//服务器返回json格式数据
				type:'post',//HTTP请求类型
				timeout:10000,//超时时间设置为10秒；
				headers:{'Content-Type':'application/json'},	              
				success:function(data){
					//console.log(data)
					var html = template("rzhtJs",data.result);
					mui("#rzhtwrap")[0].innerHTML=html;
				},
				error:function(xhr,type,errorThrown){
					//异常处理;
			       //console.log(type);
				  //console.log(xhr);
				}
			});
			
			 /*渲染新浪日志*/
			mui.ajax('http://xhwed.com/xhwe.php/Journal/journalList',{
				dataType:'json',//服务器返回json格式数据
				type:'post',//HTTP请求类型
				timeout:10000,//超时时间设置为10秒；
				headers:{'Content-Type':'application/json'},	              
				success:function(data){
					//console.log(data)
					var html = template("xlrzJs",data.result);
					mui("#xlrzwrap")[0].innerHTML=html;
				},
				error:function(xhr,type,errorThrown){
					//异常处理;
			       //console.log(type);
				  //console.log(xhr);
				}
			});
		</script>
		<script type="text/html" id="sliderJs">
			<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
			<div class="mui-slider-item mui-slider-item-duplicate">
				<a href="#">
					<img src="{{carousel[length].img}}?imageView2/1/w/400/h/300">
				</a>
			</div>
			{{each carousel as item index }}
			<div class="mui-slider-item">
				<a href="#">
					<img src="{{item.img}}?imageView2/1/w/400/h/300">
				</a>
			</div>
			{{/each }}
			<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
			<div class="mui-slider-item mui-slider-item-duplicate">
				<a href="#">
					<img src="{{carousel[0].img}}?imageView2/1/w/400/h/300">
				</a>
			</div>
		</script>
		<script type="text/html" id="rzhtJs">
			{{each hotellist as item index }}
			<li class="mui-table-view-cell mui-media mui-col-xs-12">
					<a href="#">
						<div class="header-img">
							<img class="mui-media-object" src="{{item.img[0]}}">
						</div>
						<div class="mui-media-body">
							<h1 class="journal-tit">{{item.title}}</h1>
							<div class="mui-clearfix journal-info">
								<img src="http://placehold.it/16x16" class="mui-pull-left" />
								<p class="mui-pull-left">{{item.uname}}</p>
								<p class="mui-pull-right">{{item.addtime}}</p>
							</div>
							<p class="journal-content">{{item.abstract}}</p>
							<p class="journal-footer">执行：2 收藏：13</p>
						</div>
					</a>
			</li>
			{{/each}}	
		</script>
		<script type="text/html" id="xlrzJs">
			{{each hotellist as item index }}
			<li class="mui-table-view-cell mui-media mui-col-xs-12">
					<a href="#">
						<div class="header-img">
							<img class="mui-media-object" src="{{item.img[0]}}">
						</div>
						<div class="mui-media-body">
							<h1 class="journal-tit">{{item.title}}</h1>
							<div class="mui-clearfix journal-info">
								<img src="http://placehold.it/16x16" class="mui-pull-left" />
								<p class="mui-pull-left">{{item.uname}}</p>
								<p class="mui-pull-right">{{item.addtime}}</p>
							</div>
							<p class="journal-content">{{item.abstract}}</p>
							<p class="journal-footer">执行：2 收藏：13</p>
						</div>
					</a>
			</li>
			{{/each}}	
		</script>
	</body>

</html>